<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>

<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>    
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>

<c:set var="contextPath" value="${pageContext.request.contextPath}" />        
 
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<title>Insert title here</title>
	<script type="text/javascript" src="${contextPath}/js/common/jquery-1.6.4.js"></script>
	<script type="text/javascript">
	function init(){	
		/*
			id값이 'id'인 input 태그에 입력이 발생할 때(keyup 이벤트) function의 내용을 실행한다
			id값이 'id'인 input 태그의 값을 가져와 서버에 요청을 보낸다.
			응답으로 받은 JSON 데이터의 값에 따라 클라이언트 화면에 메세지를 출력한다.
		*/
		$("#id").keyup(
			function(){
				var id = $("#id").val();
				 
				//ajax 요청
				$.ajax({
					//post 방식으로 보낸다. get도 가능
					type : 'post',
					//요청을 보낼 서버의 URL
					url : "${contextPath}/servlet/duplicationId",
					//서버에 보낼 데이터
					data : "id=" + id,
					//서버에게서 받은 데이터의 형식. JSON으로 설정되어있으며 'html', 'xml', 'text' 등 여러가지 가능
					dataType : "json",
					//서버로부터의 응답이 실패했을 경우 처리할 내용
					error : function() {
						alert("Error");
					}, 
					//서버로부터 성공적으로 응답을 받았을 경우 처리할 내용. data는 서버로부터 받은 데이터. JSON 객체로 받았음. 
					success : function(data) {
						
						var code = data.code;
						var msg = "아이디를 입력하세요.";
						var msgSpan = $("#msg")[0];
						
						//code 값에 따라 메세지를 달리한다.
						if(code == "1"){
							msg = "동일한 아이디가 존재합니다.";
						}else if(code == "2"){
							msg = "아이디를 입력하세요.";
						}else{
							msg = "사용가능한 아이디입니다.";
						}
						
						//id값이 'msg'인 태그의 자식 콘텐츠를 모두 없앤 후 메세지를 textNode로 생성하여 추가시킨다.
						$("#msg").empty();
						msgSpan.appendChild(document.createTextNode(msg));
					} 
				});
			}
		);
	}
	
	$(document).ready(function(){
		init();
	});
	
	</script>

</head>
<body>
	
	아이디 : <input type="text" name="id" id="id" />
	<span id="msg"></span>
	<br />
	<input type="submit" id="submit" />
	
</body>
</html>